<template>
  <div class="category">
    <CategoryHeader></CategoryHeader>
    <FixedPad></FixedPad>
    <div class="category-detail">
      <div class="first-level">
        <ListScroll :scrollData="allCategory">
          <div class="first-inner">
            <div
              class="first-level-item"
              v-for="f in allCategory"
              :class="{ active: currentFirstId === f.categoryId }"
              :key="f.categoryId"
              @click="clickFirstLevel(f.categoryId)"
            >
              {{ f.categoryName }}
            </div>
          </div>
        </ListScroll>
      </div>

      <div class="second-third">
        <ListScroll :scrollData="secondAndThird">
          <div class="second-third-inner">
            <div
              class="right-box"
              v-for="s in secondAndThird"
              :key="s.category"
            >
              <div class="second-title">{{ s.categoryName }}</div>
              <div class="third-level">
                <span
                  class="third-level-item"
                  v-for="r in s.categoryThirdLevelVOList"
                  :key="r.categoryId"
                  @click="jumpSearch(r.categoryId)"
                >
                  <i class="iconfont bee-shangpin"></i>
                  <span>{{ r.categoryName }}</span>
                </span>
              </div>
            </div>
          </div>
        </ListScroll>
      </div>
    </div>
    <FixedPad></FixedPad>
  </div>
</template>

<script>
import CategoryHeader from '@/views/Category/CategoryHeader'
import FixedPad from '@/components/FixedPad'
import { getCategory } from '@/api/category'
import ListScroll from '@/components/ListScroll'
export default {
  name: 'Category',
  components: {
    CategoryHeader,
    FixedPad,
    ListScroll
  },
  data() {
    return {
      allCategory: [],
      currentFirstId: '',
      secondAndThird: [],
      leftInstance: null,
      rightInstance: null
    }
  },
  mounted() {
    this.getCategoryApi()
  },
  methods: {
    async getCategoryApi() {
      const res = await getCategory().catch(err => {
        console.log(err)
        this.$toast.fail('请求失败')
      })
      if (res.resultCode === 200) {
        this.allCategory = res.data
        this.leftInstance && this.leftInstance.refresh()
        this.currentFirstId = this.allCategory[0].categoryId
        this.clickFirstLevel(this.allCategory[0].categoryId)
      }
    },

    clickFirstLevel(categoryId) {
      this.currentFirstId = categoryId
      const res = this.allCategory.find(
        ele => ele.categoryId === this.currentFirstId
      )
      this.secondAndThird = res ? res.categorySecondLevelVOList : []
      this.rightInstance && this.rightInstance.refresh()
    },

    getLeftInstance(instance) {
      this.leftInstance = instance
    },

    getRightInstance(instance) {
      this.rightInstance = instance
    },

    jumpSearch(categoryId) {
      this.$router.push({
        path: '/list',
        query: {
          categoryId
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
@import '../../common/style/mixin.less';
.category {
  font-size: 12px;
  .category-detail {
    display: flex;
    position: relative;
    height: calc(100% - 100px);
    overflow: auto;
    .first-level {
      width: 110px;
      height: 100%;
      background-color: #f8f8f8;
      .first-level-item {
        height: 55px;
        line-height: 55px;
        text-align: center;
        color: #2c3e50;
        font-size: 14px;
        &.active {
          color: @primary;
          background-color: #fff;
        }
      }
    }
    .second-third {
      width: calc(100% - 110px);
      height: 100%;
      padding: 15px 20px;
      .right-box {
        padding-bottom: 15px;
        .second-title {
          padding-bottom: 10px;
          font-size: 16px;
          font-weight: bold;
        }
        .third-level {
          display: flex;
          flex-wrap: wrap;
          &-item {
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            width: 33.333%;
            padding: 5px;
            font-size: 12px;
            .bee-shangpin {
              color: @primary;
              font-size: 24px;
            }
            > span {
              margin-top: 5px;
            }
          }
        }
      }
    }
  }
}
</style>
